import React from 'react'
import { Text, View, RefreshControl, TouchableOpacity, Image, FlatList } from 'react-native'
import { Metrics, Colors, Fonts } from '../../Themes'
import { API, WINDOW } from '../../Services'
import styles from '../Styles/CommonContainerStyles'
import ListViewSeparator from '../../Components/ListViewSeparator'
import LdImage from '../../Components/LdImage'
import { NavigationBar } from '../../Components/CustomNavibar'

class NewsListScreen extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            dataSource: [],
            isRefreshing: false,
        }
    }

    componentDidMount() {
        this._onRefresh()
    }

    _onRefresh = () => {
        this._fetch_getList_News()
    }

    //招工列表
    _fetch_getList_News() {
        this.setState({ isRefreshing: true })
        API.articleCata().then((response) => {
            const { data, ok } = response
            if (ok) {
                this.setState({ isRefreshing: false })
            } else {
                WINDOW.showToastError(data.msg || '请求失败！')
            }
        })
    }

    _renderRow({ item }) {
        return (
            <TouchableOpacity onPress={() => this.props.navigation.navigate('WebView', { ...item, type: 0 })}>
                <View style={{ backgroundColor: 'white', marginHorizontal: 10, marginTop: 20, borderRadius: 10, shadowRadius: 4, shadowOpacity: 1, shadowOffset: { width: 0, height: 1 }, shadowColor: 'rgba(255,255,255, 0.11)' }}>
                    <LdImage
                        style={{ width: '100%', height: (Metrics.screenWidth - 20) * 154 / 360, borderTopLeftRadius: 10, borderTopRightRadius: 10, }}
                        url={item.image}
                    />
                    <Text style={{ fontSize: 17, fontWeight: 'bold', color: '#000000', marginLeft: 16, marginTop: 10 }}>{item.title}</Text>

                    <View style={{ flexDirection: 'row', marginLeft: 14, marginTop: 10, marginBottom: 15, alignItems: 'center' }}>
                        <Image source={require('../../Images/icon_morentouxiang.png')} style={{ width: 26, height: 26 }} />
                        <Text style={{ fontSize: 12, color: '#000000', marginLeft: 8 }}>建筑派</Text>
                        <Text style={{ fontSize: 12, color: '#000000', right: 15, position: 'absolute' }}>{item.create_time}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }



    _ListEmptyComponent = () => {
        return (
            <View style={{ alignItems: 'center', justifyContent: 'center', alignSelf: 'center', marginTop: 100 }}>
                <Image source={require('../../Images/zanwudingdan.png')} />
                <Text style={{ fontSize: 16, color: '#666666', marginTop: 20 }}>暂无数据!</Text>
            </View>
        )
    }


    render() {
        return (
            <View style={[styles.container, { backgroundColor: Colors.background }]}>
                <FlatList
                    data={this.state.dataSource}
                    ListEmptyComponent={this._ListEmptyComponent}
                    renderItem={this._renderRow.bind(this)}
                    keyExtractor={(item) => `${item.id}`}
                    refreshControl={<RefreshControl
                        onRefresh={this._onRefresh.bind(this)}
                        refreshing={this.state.isRefreshing} />} />
            </View>
        )
    }
}


export default NewsListScreen
